<template>
  <h1>vue template</h1>
  <div>
      <Todo />
      <Suspense>
          <template #default>
            <AsyncComponent :timeout="2000" />
          </template>
          <template #fallback>
              <!-- 内部必须用元素标签包裹 -->
              <!-- <h2>加载中...</h2> -->
              <Loading />
              <!-- 这里不显示 -->
              <!-- loading... -->
          </template>
      </Suspense>
      <span>{{state.count}} * 2 + {{num}} = {{double}} </span>&nbsp;
      <button @click="add">{{'click'}}</button>
  </div>
  <FragmentDemo :data="[5,2,4,8,5,7,9,0,9,1,3,7]" />
  <TeleportDemo />
</template>

<script>
import {reactive,ref,computed,onMounted, Suspense} from 'vue'
import FragmentDemo from './components/quick.vue'
import TeleportDemo from './components/teleport.vue'
import Todo from './components/todomvc/index.vue'
import AsyncComponent from './components/async.vue'
import Loading from './components/loading.vue'

export default {
  components: { FragmentDemo, TeleportDemo, Todo, AsyncComponent, Loading },
  setup(){
    const num = ref(2)
    const {state, double} = useCounter(1, num)
    function add(){ state.count++ }
    onMounted(()=>{
        console.log('onMounted');
    })
    return {state,num,add,double} // 返回内容作为模板渲染的上下文
  }
}

function useCounter(count,n){
    const state = reactive({count})
    const double = computed(()=>state.count*2 + n.value)
    return {state, double}
}
</script>